<template>
  <view class="container">
	   <view class="re-item" style="margin-right: 10px;">检测时间: {{ formatTimestamp(data) }}</view>
	  <table class="info-table">
	    <tbody>
	      <tr>
	        <th>用户</th>
	        <td>{{ datas.username }}</td>
	    
	        <th>性别</th>
	        <td>{{ getGenderText(datas.gender) }}</td>
	      </tr>
	      <tr>
	        <th>出生日期</th>
	        <td>{{ datas.birthday }}</td>
	  	  <th>年龄</th>
	  	  <td>{{ age }}岁</td>
	      </tr>
	  	
	    </tbody>
	  </table>


    <form @submit="onSubmit">
      <view class="table-container">
          <thead>
            <tr>
              <th>测量体质类型</th>
              <th>分数</th>
              <th>测试结果</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in filterResults(response)" :key="index">
              <td><input type="text" :value="item.name" readonly /></td>
             <td><input type="number" :value="item.score" readonly /></td>
              <td><input type="text" :value="item.result" readonly /></td>
            </tr>
          </tbody>
        </table>
      </view>
    </form>
	
	<view class="foot">
		<view>* 出现两种及以上判定结果即兼夹体质是正常的，以分数高的为主要体质进行指导.如果出现判定结果分数一致，则由中医师依据专业知识判定，然后进行指导。</view>
	</view>
	<!-- 健康小贴士部分 -->
	<div class="health-tip">
	  <p>“想要了解更多健康小贴士吗？快添加我们的小助理微信，获取个性化的健康建议！”</p>
	  <img style="width: 450rpx; height: 450rpx; border: 1px solid black;" src="http://local.aierpeihu.com:9001/file-bucket/img/weixin.jpg" alt="微信二维码" />
	</div>
  </view>
</template>

<script>
import constant from '../../../utils/constant';
import { Inquire } from '@/api/finish.js';

export default {
  data() {
    return {
      response: [],
	   data: null, 
	   datas: wx.getStorageSync('user') || [],
    };
  },
  
  created() {
    this.sendDataToServer();
  },
  
  methods: {
    sendDataToServer() {
      Inquire().then(res => {
        let items = res.data.question; 
        console.log('111111	:', items);
        this.response = items; 
		
		this.data = res.data.updatetime;    
		console.log('222:', this.data);
		 
      }).catch(error => {
        console.error('Error saving data:', error);
      });
    },
	//时间戳转换
	 formatTimestamp(timestamp) {
	      if (!timestamp) return '未知';
	      const date = new Date(timestamp * 1000); 
	      const year = date.getFullYear();
	      const month = String(date.getMonth() + 1).padStart(2, '0');
	      const day = String(date.getDate()).padStart(2, '0');
	      const hours = String(date.getHours()).padStart(2, '0');
	      const minutes = String(date.getMinutes()).padStart(2, '0');
	      const seconds = String(date.getSeconds()).padStart(2, '0');
	      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
		 getGenderText(data) {
		      switch (this.datas.gender) {
		        case 1:
		          return '男';
		        case 2:
		          return '女';
		        case 0:
		          return '未知';
		        default:
		          return '未知';
		      }
		},
		filterResults(results) {
		    if (!results) return [];
		     return results.filter(item => item.result === '基本是' || item.result === '是');
		    }
  },
  
  computed: {
  		      age() {
  		        const birthday = this.datas.birthday;
  				
  		        if (!birthday) return null;
  		  
  		        const birthDate = new Date(birthday);
  		        const today = new Date();
  		  
  		        let age = today.getFullYear() - birthDate.getFullYear();
  		        const monthDiff = today.getMonth() - birthDate.getMonth();
  		        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
  		          age--;
  		        }
  		  
  		        return age;
  		      }
  		    },
}
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.info-table{
	 border-radius: 8px;
	 border: 1px solid black;
	 margin: 10px 0; 
}

.container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.table-container {
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 15px;
  text-align: center;
}

th {

  color: black;
  font-weight: bold;
}

.re{
	padding: 8px;
}
.re-item{
	margin: 0 8px;
	color: black;
	font-weight: bold;
	font-size: 13px;
}

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

input {
  border: none;
  outline: none;
  font-size: 16px;
  color: #333;
  background-color: transparent;
  text-align: center;
  width: 100%;
}

.info {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}

.foot{
	margin: 10px;
	padding-top: 20px;
	font-size: 22px;
	color: red;
}

.health-tip {
  margin-top: 20px;
  text-align: center;

  p {
    margin-bottom: 10px;
  }

  img {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}
</style>